<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画</title>
		<style type="text/css">
			*{
				margib:0;
				padding:0;
			}
			.box{
				width: 800px;
				height: 500px;
				margin:30px auto;
				background-color: bisque;
				/* 2.绑定动画 */
				/* infinite:无限 */
				animation:mv 3s linear infinite;
			}
			/* 1.创建关键帧  */
			@keyframes mv{
				0%,20%{  /* form:动画开始状态 */
					background-color:aqua;
					width:100px;
				}
				30%,50%{  /* to:动画结束状态 */
					background-color:brown;
					width:800px;
				}
				70%,100%{  /* 当前状态持续时间 */
					background-color:blueviolet;
					width:1200px;
				}
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		
	</body>
</html>